<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./stylesheets/index.css">
</head>

<body>
    <div class="head">
        <h1>学生管理系统</h1>
        <div class="login hide">
            <img src="" alt="">
            <span>xxxx</span>
            <div class="userList">
                <p id="cancel">退出登录</p>
            </div>
        </div>
    </div>
    <div class="choice">
        <button id="login">登录</button>
        <button id="reg">注册</button>
    </div>

    <div class="content hide">
        <!-- 左边目录 -->
        <div class="menu">
            <ul>
                <li id="0" class="active" >学生信息表</li>
                <li id="1" class="addStudent">新增学生</li>
                <li id="2">查询学生</li>
                <li id="3">统计图表</li>
            </ul>
        </div>
        <!-- 右边内容 -->
        <div class="box">
            <!-- 学生信息表 -->
            <div class="menuBox">
                <table class="studentList">
                    <caption>学生信息表</caption>
                    <thead>
                        <tr>
                            <th><input type="checkbox" name="" id="allChocie"></th>
                            <th>序号</th>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>学院</th>
                            <th>专业</th>
                            <th>年级</th>
                            <th>班级</th>
                            <th>年龄</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                        <td><input type="checkbox" class="oneChoice"></td>
                        <td>1</td>
                        <td>20120834040101</td>
                        <td>刘俊华</td>
                        <td>数学与信息学院</td>
                        <td>数学与应用数学</td>
                        <td>2012</td>
                        <td>1</td>
                        <td>20</td>
                        <td><button class="del">删除</button><button class="change">修改</button></td>
                    </tr> -->
                    </tbody>
                </table>
                <div class="page">
                    <p>第<span class="localPage">1</span> 页，共<span class="allPage"></span> 页，共<span
                            class="allNumber"></span>
                        条（每页显示<span class="pageNumber">10</span> 条）</p>
                    <button class="firstPage">首页</button>
                    <button class="prePage">上一页</button>
                    <button class="nextPage">下一页</button>
                    <button class="lastPage">尾页</button>
                </div>
            </div>

             <!-- 新增学生/修改学生 -->
             <div class="menuBox hide">
                <!-- 新增学生信息表单 -->
                <div class="studentInfor">
                    <h1>新增学生</h1>
                    <div>
                        学号：<input type="text" class="stuClassID" placeholder="请输入12位数字学号"> <span
                            class="spClassID"></span>
                    </div>
                    <div>
                        姓名：<input type="text" class="stuName" placeholder="请输入学生姓名"> <span class="spName"></span>
                    </div>
                    <div>
                        <select name="" id="college">
                            <option value="">请选择学院</option>
                        </select>
                        <select name="" id="major">
                            <option value="">请选择专业</option>

                        </select>
                        <select name="" id="classNumber">
                            <option value="">请选择班级</option>

                        </select>
                    </div>
                    <div>
                        <input type="number" class="stuAge" placeholder="请输入年龄" min="16">
                    </div>
                    <div>
                        <button class="sureAdd">确定</button>
                        <button class="cancelAdd">取消</button>
                    </div>

                </div>
            </div>

            <!-- 查询学生 -->
            <div class="menuBox hide">
                <input class="stuInfor" type="text" placeholder="请输入学号/姓名">
                <button class="search">查询</button>
                <table class="searchStudent">
                    <thead>
                        <tr>
                            <th><input type="checkbox" name="" id="allChocie"></th>
                            <th>序号</th>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>学院</th>
                            <th>专业</th>
                            <th>年级</th>
                            <th>班级</th>
                            <th>年龄</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <!-- 统计图表 -->
            <div id="main" class="menuBox hide" >


            </div>

           

            <!-- 修改学生信息表单 -->
            <div class="changeStudentInfor">
                <h1>修改学生</h1>
                <div>
                    学号：<input type="text" class="changeStuClassID" readonly> <span class="changeSpClassID"></span>
                </div>
                <div>
                    姓名：<input type="text" class="changeStuName" placeholder="请输入学生姓名"> <span
                        class="changeSpName"></span>
                </div>
                <div>
                    <select name="" id="changeCollege">
                        <!-- <option value="">请选择学院</option> -->
                    </select>
                    <select name="" id="changeMajor">
                        <!-- <option value="">请选择专业</option> -->

                    </select>
                    <select name="" id="changeClassNumber">
                        <!-- <option value="">请选择班级</option> -->

                    </select>
                </div>
                <div>
                    <input type="number" class="changeStuAge" placeholder="请输入年龄" min="16">
                </div>
                <div>
                    <button class="sureChange">确定</button>
                    <button class="cancelChange">取消</button>
                </div>

            </div>



        </div>

    </div>

    <script src="./javascripts/jquery-3.7.1.js"></script>
    <script src="./javascripts/echarts.min.js"></script>
    <script src="./javascripts/globalAjax.js"></script>
    <script src="./javascripts/index.js"></script>

</body>

</html>